﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BlazorDateRangePicker</title>
    <base href="/" />
    <link rel="stylesheet" href="_content/Demo.Shared/css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="_content/Demo.Shared/css/bootstrap/docs.min.css" />
    <link rel="stylesheet" href="_content/Demo.Shared/highlight/vs.css" />
    <link rel="stylesheet" href="_content/BlazorDateRangePicker/daterangepicker.min.css" />
    <link rel="stylesheet" href="_content/Demo.Shared/css/site.css" />
    <script src="_content/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
</head>
<body>
    <app>
        <style>
            body {
                background: #eff3f8;
            }

            .preloader {
                margin: 200px auto;
            }

                .preloader img {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                }

            h1 {
                color: #FFF;
                font-size: 16px;
                letter-spacing: 1px;
                font-weight: 200;
                text-align: center;
            }

            .loader span {
                width: 16px;
                height: 16px;
                border-radius: 50% !important;
                display: inline-block;
                position: absolute;
                left: 50%;
                margin-left: -10px;
                animation: 3s infinite linear;
                -webkit-animation: 3s infinite linear;
                -moz-animation: 3s infinite linear;
                -o-animation: 3s infinite linear;
            }


                .loader span:nth-child(2) {
                    background: #E84C3D;
                    animation: kiri 1.2s infinite linear;
                    -webkit-animation: kiri 1.2s infinite linear;
                    -moz-animation: kiri 1.2s infinite linear;
                    -o-animation: kiri 1.2s infinite linear;
                }

                .loader span:nth-child(3) {
                    background: #F1C40F;
                    z-index: 100;
                }

                .loader span:nth-child(4) {
                    background: #2FCC71;
                    animation: kanan 1.2s infinite linear;
                    -webkit-animation: kanan 1.2s infinite linear;
                    -moz-animation: kanan 1.2s infinite linear;
                    -o-animation: kanan 1.2s infinite linear;
                }

            @keyframes kanan {
                0% {
                    -webkit-transform: translateX(20px);
                }

                50% {
                    -webkit-transform: translateX(-20px);
                }

                100% {
                    -webkit-transform: translateX(20px);
                }
            }

            @-webkit-keyframes kanan {
                0% {
                    -webkit-transform: translateX(20px);
                }

                50% {
                    -webkit-transform: translateX(-20px);
                }

                100% {
                    -webkit-transform: translateX(20px);
                }
            }

            @-moz-keyframes kanan {
                0% {
                    -moz-transform: translateX(20px);
                }

                50% {
                    -moz-transform: translateX(-20px);
                }

                100% {
                    -moz-transform: translateX(20px);
                    z-index: 200;
                }
            }

            @-o-keyframes kanan {
                0% {
                    -o-transform: translateX(20px);
                }

                50% {
                    -o-transform: translateX(-20px);
                }

                100% {
                    -o-transform: translateX(20px);
                    z-index: 200;
                }
            }

            @keyframes kiri {
                0% {
                    -webkit-transform: translateX(-20px);
                }

                50% {
                    -webkit-transform: translateX(20px);
                }

                100% {
                    -webkit-transform: translateX(-20px);
                }
            }

            @-webkit-keyframes kiri {
                0% {
                    -webkit-transform: translateX(-20px);
                }

                50% {
                    -webkit-transform: translateX(20px);
                }

                100% {
                    -webkit-transform: translateX(-20px);
                }
            }

            @-moz-keyframes kiri {
                0% {
                    -moz-transform: translateX(-20px);
                    z-index: 200;
                }

                50% {
                    -moz-transform: translateX(20px);
                }

                100% {
                    -moz-transform: translateX(-20px);
                }
            }

            @-o-keyframes kiri {
                0% {
                    -o-transform: translateX(-20px);
                    z-index: 200;
                }

                50% {
                    -o-transform: translateX(20px);
                }

                100% {
                    -o-transform: translateX(-20px);
                }
            }
        </style>
        <div class="preloader">
            <blockquote class="blockquote text-center">
                <p>Loading WebAssembly application...</p>
            </blockquote>
            <div class="loader">
                <h1></h1>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </app>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Demo.Shared/highlight/highlight.pack.js"></script>
    <script src="_content/Demo.Shared/highlight/cshtml-razor.js"></script>
    <script src="_content/Demo.Shared/highlight/highlightInterop.js"></script>
    <script>
        hljs.registerLanguage('cshtml-razor', window.hljsDefineCshtmlRazor);
        hljs.initHighlightingOnLoad();
    </script>
</body>
</html>
